<template>
	<common-page title="注册新账号">
		<el-steps :active="stepActive" simple finish-status="success">
			<el-step title="基础信息" />
			<el-step title="详细信息" />
			<el-step title="完成注册" />
		</el-steps>
		<el-form v-if="stepActive == 0" ref="stepForm_0" :model="mysqlform" :rules="rules" :label-width="120">
			<el-form-item label="登录账号" prop="user">
				<el-input v-model="mysqlform.username" placeholder="请输入登录账号" @blur="yan"></el-input>
				<div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input v-model="mysqlform.password" type="password" show-password placeholder="请输入登录密码"></el-input>
				<sc-password-strength v-model="mysqlform.password"></sc-password-strength>
				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
			</el-form-item>
			<el-form-item label="确认密码" prop="password2">
				<el-input v-model="mysqlform.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="" prop="agree">
				<el-checkbox v-model="mysqlform.agree" label="">已阅读并同意</el-checkbox><span class="link"
					@click="showAgree = true">《平台服务协议》</span>
			</el-form-item>
		</el-form>
		<div v-if="stepActive == 1" ref="stepForm_1" :rules="rules" :label-width="120">
			<div>
				<canvas style="display: none" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>
				<div class="imgs">
					<video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay class="img"></video>
				</div>
				<div class="paizhao">
					<el-button class="but" @click="getCompetence()" type="primary" plain>打开摄像头</el-button>
					<el-button class="but" @click="setImage()" type="primary" plain>拍照</el-button>
				</div>
			</div>
		</div>
		<div v-if="stepActive == 2">
			<el-result icon="success" title="注册成功" sub-title="可以使用登录账号以及手机号登录系统">
				<template #extra>
					<el-button type="primary" @click="goLogin">前去登录</el-button>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<el-button v-if="stepActive > 0 && stepActive < 2" @click="pre">上一步</el-button>
			<el-button v-if="stepActive < 1" type="primary" @click="next" id="xia" :disabled="this.disabled">下一步</el-button>
			<el-button v-if="stepActive == 1" type="primary" @click="save">注册</el-button>
		</el-form>
		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
			平台服务协议
			<template #footer>
				<el-button @click="showAgree = false">取消</el-button>
				<el-button type="primary" @click="showAgree = false; form.agree = true;">我已阅读并同意</el-button>
			</template>
		</el-dialog>
	</common-page>
</template>

<script>
import scPasswordStrength from '@/components/scPasswordStrength';
import axios from 'axios';
import commonPage from './components/commonPage'
import { ElMessage } from 'element-plus'
// import { fa } from 'element-plus/es/locale';
export default {
	components: {
		commonPage,
		scPasswordStrength
	},
	data() {
		return {
			disabled:false,
			stepActive: 0,
			showAgree: false,
			mysqlform: {
				username: "admin123",
				password: "admin123",
				password2: "admin123",
				images: "",
				ImageA: "",
				ImageB: "",
				agree: true,
			},
			form: {
				user: "",
				password: "",
				password2: "",
				agree: false,
				userName: "",
				email: "",
				userType: "1",
				open: []
			},
			rules: {
				username: [
					{ required: true, message: '请输入账号名' },
					
				],
				password: [
					{ required: true, message: '请输入密码' }
				],
				password2: [
					{ required: true, message: '请再次输入密码' },
					{
						validator: (rule, value, callback) => {
							if (value !== this.mysqlform.password) {
								callback(new Error('两次输入密码不一致'));
							} else {
								callback();
							}
						}
					}
				],
				agree: [
					{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请阅读并同意协议'));
							} else {
								callback();
							}
						}
					}
				],
			}
		}
	},
	mounted() {

	},
	methods: {
		getCompetence() {
			var _this = this;
			_this.thisCancas = document.getElementById("canvasCamera");
			_this.thisContext = this.thisCancas.getContext("2d");
			_this.thisVideo = document.getElementById("videoCamera");
			_this.thisVideo.style.display = "block";
			// 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象
			if (navigator.mediaDevices === undefined) {
				navigator.mediaDevices = {};
			}
			// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
			// 使用getUserMedia，因为它会覆盖现有的属性。
			// 这里，如果缺少getUserMedia属性，就添加它。
			if (navigator.mediaDevices.getUserMedia === undefined) {
				navigator.mediaDevices.getUserMedia = function (constraints) {
					// 首先获取现存的getUserMedia(如果存在)
					var getUserMedia =
						navigator.webkitGetUserMedia ||
						navigator.mozGetUserMedia ||
						navigator.getUserMedia;
					// 有些浏览器不支持，会返回错误信息
					// 保持接口一致
					if (!getUserMedia) {
						//不存在则报错
						return Promise.reject(
							new Error("getUserMedia is not implemented in this browser")
						);
					}
					// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
					return new Promise(function (resolve, reject) {
						getUserMedia.call(navigator, constraints, resolve, reject);
					});
				};
			}
			var constraints = {
				audio: false,
				video: {
					width: this.videoWidth,
					height: this.videoHeight,
					transform: "scaleX(-1)",
				},
			};
			navigator.mediaDevices


				.getUserMedia(constraints)
				.then(function (stream) {
					// 旧的浏览器可能没有srcObject
					if ("srcObject" in _this.thisVideo) {
						_this.thisVideo.srcObject = stream;
					} else {
						// 避免在新的浏览器中使用它，因为它正在被弃用。
						_this.thisVideo.src = window.URL.createObjectURL(stream);
					}
					_this.thisVideo.onloadedmetadata = function () {
						_this.thisVideo.play();
					};
				})
				.catch((err) => {
					console.log(err);
				});
		},
		//  绘制图片（拍照功能）
		setImage() {
			var _this = this;
			// canvas画图
			_this.thisContext.drawImage(
				_this.thisVideo,
				0,
				0,
				_this.videoWidth,
				_this.videoHeight
			);
			// 获取图片base64链接
			console.log(this.thisCancas, 1961565)
			var image = this.thisCancas.toDataURL("image/png");
			this.mysqlform.images = image; //赋值并预览图片
			this.mysqlform.ImageB = image; //赋值并预览图片
			this.$message({ showClose: true, message: '捕获成功', type: 'success' });
		},
		pre() {
			this.stepActive -= 1
		},
		yan(){
axios.get(`http://127.0.0.1:8000/face?search=${this.mysqlform.username}`).then(msg=>{
								if(msg.data.length!=0){
									this.disabled=true
									ElMessage.error('用户名重复')
								}else{
									this.disabled=false
								}
							})
		},
		next() {
			const formName = `stepForm_${this.stepActive}`
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.stepActive += 1
				} else {
					return false
				}
			})
		},
		save() {
			console.log(this.mysqlform);
			axios.post('http://127.0.0.1:8000/face',this.mysqlform).then(() => {
				this.stepActive += 1
				
			})
		},
		goLogin() {
			this.$router.push({
				path: '/login'
			})
		}
	}
}
</script>

<style scoped>

</style>
